<template>
  <view class="flex-row flex-center">
    <view class="tui-loadmore flex-row flex-center">
      <!-- #ifndef APP-NVUE -->
      <view :class="['tui-loading-'+index, (index==3 && type)?'tui-loading-'+type:'']" />
      <!-- #endif -->
      <text class="text-24 color-t3">{{ text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TuiLoadmore',
  props: {
    // 显示文本
    text: {
      type: String,
      default: '正在加载...'
    },
    // loading 样式 ：1,2,3
    index: {
      type: Number,
      default: 1
    },
    // 颜色设置，只有index=3时生效：primary，red，orange，green
    type: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
	.tui-loadmore {
		width: 360rpx;
		margin: 20rpx 0;
		line-height: 1.5em;
		font-size: 24rpx;
		text-align: center;
	}

	/*#ifndef APP-NVUE*/
  .tui-loading-1 {
    margin: 0 10rpx;
    width: 40rpx;
    height: 40rpx;
    -webkit-animation: a 1s steps(12) infinite;
    animation: a 1s steps(12) infinite;
    background: transparent url() no-repeat;
    background-size: 100%;
  }

  @-webkit-keyframes a {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn);
    }
  }

  @keyframes a {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn);
    }
  }

  .tui-loading-2 {
    width: 28rpx;
    height: 28rpx;
    border: 1px solid #8f8d8e;
    border-radius: 50%;
    margin: 0 6px;
    display: inline-block;
    vertical-align: middle;
    clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 30%);
    animation: rotate 1s linear infinite;
  }

  @-webkit-keyframes rotate {
    from {
      transform: rotatez(0deg);
    }

    to {
      transform: rotatez(360deg);
    }
  }

  @keyframes rotate {
    from {
      transform: rotatez(0deg);
    }

    to {
      transform: rotatez(360deg);
    }
  }

  .tui-loading-3 {
    display: inline-block;
    margin: 0 6px;
    vertical-align: middle;
    width: 28rpx;
    height: 28rpx;
    background: 0 0;
    border-radius: 50%;
    border: 2px solid;
    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
    animation: tui-rotate 0.7s linear infinite;
  }

  .tui-loading-3.tui-loading-primary {
    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
  }

  .tui-loading-3.tui-loading-green {
    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
  }

  .tui-loading-3.tui-loading-orange {
    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
  }

  .tui-loading-3.tui-loading-red {
    border-color: #ededed #ededed #ededed #ed3f14;
  }

  @-webkit-keyframes tui-rotate {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes tui-rotate {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }
  /*#endif*/
</style>
